<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .box {
          width: 200px;
          height: 200px;
          background-color: #cbebf8;
          border-radius: 10px;
          /* 阴影 */
          box-shadow: 0 0 5px #000;
          margin: 100px;
          position: relative; /* 相对定位 */
        }
        .box img {
          position: absolute;
          left: -34px;
          top: 50%;
          transform: translateY(-50%);
          /* 图片阴影 */
          filter: drop-shadow(0 0 3px #000);
        }
        .box::after {
          content: "";
          width: 50px;
          height: 50px;
          background-color: #cbebf8;
          display: block;
          /* 遮罩层 */
          position: absolute;
          left: 0px;
          top: 50%;
          transform: translateY(-50%);
        }
      </style>
      
      <div class="box">
        <img src="/src/img/css3/arrow.png" alt="" />
      </div>
</body>
</html>